<template>
  <!-- 奖品详情 -->
  <view class="content">
    <view class="content-header">
      <!-- <image src="goods.prizeAvatar" mode=""></image> -->
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
    </view>
    <view class="content-font">
      <view style="width: 100%;height: 500rpx; padding: 20rpx; box-sizing: border-box;"><image :src="goods.prizeAvatar" style="width: 100%; height: 100%;" mode=""></image></view>

      <text style=" padding: 0 40rpx; box-sizing: border-box;">
        商品名称:
        <text style="font-size: 24rpx; font-weight: normal; margin-left: 20rpx;">{{ goods.prizeName }}</text>
      </text>
      <text style=" padding: 0 40rpx; box-sizing: border-box;">
        所需积分:
        <text style="font-size: 24rpx; font-weight: normal;margin-left: 20rpx;">{{ goods.needIntegral }}</text>
      </text>
      <text class="details" style=" padding: 0 40rpx; box-sizing: border-box;">
        商品详情:
        <text style="font-size: 24rpx; font-weight: normal;margin-left: 20rpx;">{{ goods.prizeIntroduce }}</text>
      </text>
      <view class="btns">
        

        <view class="footbtn" @click="Offline = true">线下自提</view>
        <view class="footbtn" style="background-color: #2589FF;color: #FFFFFF;"  @click="mail = true">快递取货</view>
      </view>
    </view>

    <!-- 线下自提的弹框 -->
    <u-modal :show="Offline" :title="offlineTitle" :content="fontTitle" showCancelButton @confirm="OfflineClick" @cancel="Offline = false"></u-modal>
    <!-- 线下地址得弹框 -->
    <u-modal :show="offlineAddress" :title="offlineTitle" :content="'领奖地址:' + offlineAddressText" @confirm="closeofflineAddress"></u-modal>

    <!-- 填写邮寄地址的弹框 -->
    <u-modal :show="mail" :title="mailTitle" :content="fontTitle" showCancelButton @confirm="goTomail" @cancel="mail = false"></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      getprize: {
        mailAddress: '',
        openId: uni.getStorageSync('openid'),
        type: null
      },
      thisId: null,
      goods: {},
      Offline: false, //控制线下弹框的显示
      offlineAddress: false, //线下地址是否显示
      mail: false, //邮寄是否显示
      offlineAddressText: '', //线下自提地址
      offlineTitle: '线下自提',
      mailTitle: '快递取货',
      fontTitle: '是否选择该方式领奖'
    };
  },
  onLoad(options) {
    this.thisId = options.id;
    this.getGoodsDetails();
  },

  methods: {
    // id查询商品信息
    async getGoodsDetails() {
      const { data } = await uni.$http.get('/prize/findById?id=' + this.thisId);
      if (data.statusCode !== 200) {
        return;
      } else {
        this.goods = data.data;
        console.log('商品信息', this.goods);
      }
    },
    // 线下领奖的却按钮
    async OfflineClick() {
      this.Offline = false;
      this.getprize.prizeId = this.thisId;
      this.getprize.type = 1;
      const { data } = await uni.$http.post('/prize/addMailAddress', this.getprize);

      if (data.statusCode !== 200) {
        return uni.showToast({
          title: data.message,
          icon: 'error'
        });
      } else {
        const res = await uni.$http.get('/parameter/findAwardAddress');
        console.log(res);
        if (res.data.statusCode !== 200) {
          return;
        } else {
          console.log('res', res);
          this.offlineAddressText = res.data.data.address;
          this.offlineAddress = true;
        }
      }
    },
    // 关闭线下地址的弹框
    closeofflineAddress() {
      this.offlineAddress = false;
      uni.switchTab({
        url: '../../pages/mine/mine'
      });
    },
    //前往填写地址
    goTomail() {
      uni.navigateTo({
        url: '../PrizeReceivingAddress/PrizeReceivingAddress?goodsId=' + this.thisId
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
  height: 100%;
  // padding: 50rpx 50rpx 0 50rpx;
  box-sizing: border-box;

  .content-header {
    position: relative;
    height: 500rpx;
    background-color: #ffffff;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .content-font {
    width: 80%;
    position: absolute;
    top: 50rpx;
    left: 50%;
    border-radius: 25rpx;
    box-shadow: 0 0 5rpx #ccc;
    box-sizing: border-box;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    justify-content: space-around;

    text {
      margin: 20rpx 0;
      font-size: 28rpx;
      font-weight: 700;
    }

    .details {
      height: 150rpx;
      overflow: scroll;
    }
  }
  .btns {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .footbtn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150rpx;
      height: 50rpx;
      background-color: #fff;
      border-radius: 25rpx;
      border: 2rpx solid #2589ff;
      color: #2589ff;
      font-size: 26rpx;
    }
  }
  /deep/.u-modal__title.data-v-713d0fd3 {
    padding-bottom: 25px;
  }
  /deep/.u-modal__content__text.data-v-713d0fd3 {
    text-align: center;
  }
}
</style>
